<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>管理银行卡</title>
    <script src="../static/js/jquery.min.js"></script>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <script src="../static/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css">
<?php
require_once "session.php";
$id=$_REQUEST["id"];
$bank=$core->GetCardById($id);
$bankname=$bank["bank_name"];
$bank_name=["支付宝","中国银行","工商银行","建设银行","农业银行","邮政储蓄","招商银行","交通银行","广大银行"]
?>
</head>
<body>
<div id="head" style="position: relative;">
    <a href="javascript:history.go(-1)" class="back_btn">
        <span class="glyphicon glyphicon-chevron-left " style="line-height: 45px"></span>
    </a>
    <span style="font-size: 25px;">修改银行卡</span>
</div>
<div id="MainPanel">
    <span id="msg">请绑定持卡人本人的银行卡</span>
    <div id="bank_center">
        <div>
            持卡人
            <input id="card_user" value="<?php echo $bank["holder"]; ?>" type="text" class="pull-right bank_input" onkeyup="input()" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))">
        </div>
        <div>
            银行
            <select id="choose_bank" class="pull-right" >
               <?php
               for($a=0;$a<count($bank_name);$a++){ ?>
                   <option <?php echo (($bank_name[$a]==$bankname)?"selected='selected'>":">").$bank_name[$a]; ?></option>
               <?php }?>
            </select>
        </div>
        <div>
            卡号
            <input id="card_num" type="text" value="<?php echo $bank["card_num"]; ?>" placeholder="银行卡号" class="pull-right bank_input" onkeyup="input()" onafterpaste="this.value=this.value.replace(/\D/g,'')">
        </div>
    </div>
    <span>智能加密，保障你的用卡安全</span>
    <button id="next" ontouchend="update(<?php echo $bank["id"] ?>)" disabled="disabled">修改</button>
    <button id="delete" data-toggle="modal" data-target="#myModal">删除</button>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">删除提示</h4>
                </div>
                <div class="modal-body">
                    删除银行卡后，此卡所有提现申请将全部删除，请问你是否确认删除银行卡?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal" ontouchend="delete_bank(<?php echo $bank["id"] ?>)">确认删除</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal"  id="show_msg" style="display:none;width:80%;margin:40% auto;">
    <div class="modal-content">
        <div class="modal-header" style="background-color: deepskyblue">提示</div>
        <div class="modal-body" id="msg_body">
        </div>
        <div class="modal-footer">
            <button class="btn btn-default" id="enter" style="font-family: 楷体;font-size: 17px">确定</button>
        </div>
    </div>
</div>
<script>
    var height=document.body.scrollHeight;
    document.getElementById("MainPanel").style.height=height+"px";

    var btn=document.getElementById("next");

    var name=$('#card_user').val();
    var bank=$('#choose_bank').val();
    var num=$('#card_num').val();
    $('#card_user').bind('input propertychange', function(){
        input();
    });
    $('#card_num').bind('input propertychange', function(){
        input();
    });
    $('#choose_bank').change(input);


    function input() {
        var card_user=$("#card_user").val();
        var bank_name=$('#choose_bank').val();
        var card_num=$("#card_num").val();
        if(card_user!=""&&card_num!=""&&card_num.length>=5){
            if(card_user!=name||bank_name!=bank||card_num!=num){
                btn.style.backgroundColor="rgb(255,137,0)";
                btn.style.color="white";
                $("#next").removeAttr("disabled");
            }else{
                btn.style.backgroundColor="rgb(221,221,221)";
                btn.style.color="rgb(193,193,193)";
                btn.disabled="disabled";
            }
        }else{
            btn.style.backgroundColor="rgb(221,221,221)";
            btn.style.color="rgb(193,193,193)";
            btn.disabled="disabled";
        }
    }

    function update(id) {
        var new_name=$('#card_user').val();
        var new_bank=$('#choose_bank').val();
        var new_num=$('#card_num').val();
        $.post("fun_update_bank.php", {id:id,name:new_name, bank:new_bank, num:new_num}, function (o) {
            if(o==""){
                $('#msg_body').html('恭喜您,修改成功！');
                $('#show_msg').show(500);
            }else{
                $('#msg_body').html(o);
                $('#show_msg').show(500);
            }
        });
    }

    function delete_bank(bank_id) {
        $.post("fun_delete_bank.php",{id:bank_id},function (o) {
            if(o==""){
                $('#msg_body').html('恭喜您,删除成功！');
                $('#show_msg').show(500);
            }else{
                $('#msg_body').html(o);
                $('#show_msg').show(500);
            }
        });
    }
    $('#enter').on("touchend",function(){
        $('#msg_body').html("");
        $('#show_msg').hide(500);
        location.href="User_Menu.php";
    });
    $(function() {
        $("[ontouchend]").each(function(index, element) {
            var moved = false;
            var bindFn = function(touchEndFn) {
                if (!moved) {
                    eval(touchEndFn);
                }
                moved = false;
            }
            $(this).bind("touchend", bindFn.bind(this, $(this).attr("ontouchend")));
            $(this).bind("touchmove", function() {
                moved = true;
            });
            $(this).removeAttr("ontouchend");
        });

    })
</script>
</body>
</html>